import React, { memo } from 'react'
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'
import Home from './view/Home'
import About from './view/About'
import Car from './view/Car'
import My from './view/My'
import { Tabbar } from 'react-vant'
import Tui from './view/Tui'
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons'
const App = memo(() => {
  let location = useLocation()
  let navigate = useNavigate()
  return (
    <div>
      <div>

        <Routes>
          <Route path='/home' element={<Home></Home>}>
            {/* 二级路由 */}
            <Route path='/home/tui' element={<Tui></Tui>}></Route>
          </Route>
          <Route path='/about' element={<About></About>}></Route>
          <Route path='/car' element={<Car></Car>}></Route>
          <Route path='/my' element={<My></My>}></Route>
        </Routes>

      </div>
      <div>
        <Tabbar value={location.pathname} onChange={v => navigate(v)}>
          <Tabbar.Item name='/home' icon={<HomeO />}>
            首页
          </Tabbar.Item>
          <Tabbar.Item name='/about' icon={<Search />}>
            分类
          </Tabbar.Item>
          <Tabbar.Item name='/car' icon={<FriendsO />}>
            购物车
          </Tabbar.Item>
          <Tabbar.Item name='/my' icon={<SettingO />}>
            我的
          </Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  )
})

export default App
